<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body>

<style>
    section {display: flex;flex-direction: column;height: 100vh;padding: 10px;}
    div {text-align: center;flex: 1;border-width: 1px;margin: 10px;display: flex;}
    i.ico {font-size: 1rem;display: none;}
</style>

<!----------------------------------------------------------------------------------------->

<!--
priority: all>left>right>down>up
-->

<section>
    <div class="touch">
        <i class="ico ico-angle-left"></i>
        <i class="ico ico-angle-right"></i>
        <i class="ico ico-angle-top"></i>
        <i class="ico ico-angle-bottom"></i>
    </div>
    <div class="touch-all"><i class="ico ico-angle-enlarge"></i></div>
</section>

<!----------------------------------------------------------------------------------------->

<script>
    $('.touch').touch('up',function(){
        $("i").hide()
        $(".ico-angle-top").show()
    })
    $('.touch').touch('down',function(){
        $("i").hide()
        $(".ico-angle-bottom").show()
    })
    $('.touch').touch('left',function(){
        $("i").hide()
        $(".ico-angle-left").show()
    })
    $('.touch').touch('right',function(){
        $("i").hide()
        $(".ico-angle-right").show()
    })
    $('.touch-all').touch('all',function(){
        $(".ico-angle-enlarge").show()
    })
</script>

</body>
</html>